<template>
  <div class="recommend" style="margin-top:50px;margin-bottom: 50px;">
    <alert v-if="message" v-text="message"></alert>
    <article>

      <md-tabs md-centered class="md-transparent" >
        <md-tab md-icon="ondemand_video" class="switch">
          <span class="rec-span">推荐歌单</span>
          <md-card  v-for="(item,index) in recList" :key="index" md-with-hover style="width:calc(50% - 15px);display: inline-block;margin-right: 15px;margin-top: 10px;">
            <md-card-media >
              <img :src="item.img" alt="People" @click="doSwitch(item.id)" >
            </md-card-media>
            <md-card-actions>
              <i class="demo-icon icon-eye"></i>
              <i class="demo-icon icon-bookmark"></i>
              <i class="demo-icon icon-share"></i>
            </md-card-actions>
          </md-card>
        </md-tab>
        <md-tab md-icon="music_note" ref="switch">
          <span class="rec-span">{{currentList.name}}</span>
          <section class="fav-list" v-for="(item,index) in currentList.songs">
               <span class="left">
                 <img :src="item.img" alt="header" />
               </span>
               <span class="right">
                  {{item.sname}}/{{item.singer}}
               </span>
               <span style="float: right;display:inline-block;padding-top: 15px;">
                  <i :data-flag="0" :id="item.sid" @click="like($event)" :class="item.flag==true?'like':''" class="demo-icon icon-heart"  :data-index="index" ></i>
                 <!-- <i :data-id="currentList.id" :data-sid="item.sid" :id="item.sid" @click="like($event)" :class="item.flag==true?'like':''" class="demo-icon icon-heart"  :data-index="index"></i>-->
               </span>
          </section>
        </md-tab>
        <md-tab md-icon="favorite">
          <span class="rec-span">收藏歌单</span>
          <section class="fav-list" v-for="item in likeList">
               <span class="left">
                 <img :src="item.img" alt="header" />
               </span>
               <span class="right">
                  {{item.name}} / {{item.singer}}
               </span>
            <span style="float: right;display:inline-block;padding-top: 15px;">
              <i  class="demo-icon icon-bug" @click="deleteLike(item.id)"></i>
            </span>
          </section>
        </md-tab>
      </md-tabs>

    </article>
  </div>
</template>
<script>
  import Alert from '../alert/alert.vue'
  export default {
    name:'recommend',
    data(){
      return{
        recList:{},
        currentId:0,
        currentClass:"",
        message:"",
        currentList:{},
        likeList:{},
        hiddenId:1,
        index:-1,
      }
    },
    methods:{
      like(ev) {
        const arrayList = this.currentList.songs;    //当前歌曲列表
        const selected = arrayList[ev.target.getAttribute("data-index")];       //选中的歌曲信息
        const dataFlag = ev.target.getAttribute("data-flag");                   //歌曲的data-flag值

        if(dataFlag=="1"){
           this.message = "歌曲已经在播放队列！";
           setInterval(()=>{
             this.message = ""
           },3000)
        }
        else {
          //添加到喜欢的列表
           let likeItem = {
             id:selected.sid,
             name:selected.sname,
             singer:selected.singer,
             img:selected.img,
             flag:true
           };
           this.$http.post("http://localhost:3000/like",likeItem)
             .then((response)=>{
                this.message = "添加成功!";
                this.fetchLikeList();               //刷新收藏列表
                this.fetchCurrentList();            //刷新歌曲列表
                setInterval(()=>{
                  this.message = ""
                },3000)
             })
           ev.target.setAttribute("data-flag","1");
        }
        console.log(ev.target);
      },
      doSwitch(id){
       var btn = this.$refs.switch.parentTabs.$el.children[0].children[0].children[0].children[1];
       btn.click();
       this.hiddenId = id;
       this.$http.get("http://localhost:3000/recommend/"+id)
         .then((response)=>{
            this.currentList = response.body;
         })
      },
     /*获取喜欢的列表数据*/
      fetchLikeList(){
        this.$http.get("http://localhost:3000/like")
          .then((response)=>{
            this.likeList = response.body;
          })
      },
      /*获取歌曲列表数据*/
      fetchCurrentList(){
        this.$http.get("http://localhost:3000/recommend/"+this.hiddenId)
          .then((response)=>{
            this.currentList = response.body;
          });
      },
      deleteLike(id){
        this.$http.delete("http://localhost:3000/like/"+id)
          .then((response)=>{
            this.fetchLikeList();
          })
      }
    },
    created(){
      this.$http.get("http://localhost:3000/recommend")
        .then((response)=>{
           this.recList = response.body;
        });
      this.fetchLikeList();
      this.fetchCurrentList();
    },
    components:{
      Alert
    }
  }
</script>
<style>
  .like{
    color: #D43C33;
  }
  .rec-span{
    border-left:2px solid #D43C33;
    display:block;
    padding-left: 10px;
  }
  .left>img{
    width:52px;
    min-width: 52px;
    height: 52px;
    border-radius: 50%;
  }
  .right{
    font-size: 16px;
    padding-left: 15px;
  }
  .fav-list{
    margin-top: 15px;
    margin-bottom: 15px;
  }
</style>
